<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<dom-module id="repeat-demo">
  <template>
    <style>
      :host{
        display: block;
      }
      .item{
          border-bottom: 1px solid #ccc;
      }
    </style>
    <template is="dom-repeat" items="{{users}}"
        filter="isYoung"
        sort="sortByAge"
        >
        <div class="item">
            <span>index:#{{index}}</span><br />
            <span>name:{{item.name}}</span><br />
            <span>age:{{item.age}}</span>
        </div>
    </template>
    <button on-click="addUser">添加</button>
    <button on-click="updateUser">修改第一项的name</button>
    <button on-click="deleteUser">删除第二项</button>
  </template>

  <script>
    /**
     * @RepeatDemo
     * @polymer
     */
    class RepeatDemo extends Polymer.Element {
      static get is() { return 'repeat-demo'; }
      static get properties(){
        return {
          users:{
            type: Array,
            value:[{
                name:"zhongzhong",
                age:25
            },{
                name:"google",
                age:30
            },{
                name:"somebody",
                age:12
            }]
          }
        }
      }
      isYoung(item){
        return item.age > 20;
      }
      //按age降序
      sortByAge(item1,item2){
        return item1.age < item2.age;
      }
      addUser(){
        //   this.push("users",{name:"new name",age:11})
        this.users.push({name:"new name",age:11});
        this.notifyPath("users");
      }
      updateUser(){
          this.set("users.0.name","zhongzhong2");
      }
      deleteUser(){
          this.splice("users",1,1);
      }
    }
    window.customElements.define(RepeatDemo.is, RepeatDemo);

  </script>
</dom-module>


